<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<title>jQuery UI ThemeRoller Developer Tool</title>
    <link rel="stylesheet" type="text/css" href="ext/jquery/ui/redmond/jquery-ui-1.8.16.css" />
		<style type="text/css">
			body {font-size: 62.5%; opacity: 1 !important; }
			#trdevtool_contain { margin: 50px auto; width: 600px; position: relative; z-index: 1000; }
			div.ui-widget h1 { font-size: 1.6em; font-weight: bold; margin-left: 68px;  }
			div.ui-widget h1 span { text-transform: uppercase; font-size: .8em;   }
			div.ui-widget div.ui-widget-header { padding: 20px 15px; }
			h1 {margin: 0;}
			div.ui-widget-content { padding: 8px; }
			div.ui-widget-content div.ui-widget-content {border: 0;  padding: 20px 40px;}
			p { font-size: 1.3em; line-height: 1.6;  }
			p a.ui-state-default { padding: .6em 1em .6em 6px;  text-decoration: none; display: block; font-weight: bold; position: relative; font-size: 1.1em; width: 14em;  }
			p a.ui-state-default span.ui-icon { float: left; margin: 4px 8px 0 5px;  }
			p.ortry { font-size: 1.1em; font-style: italic;  }
			.firefox_logo{ position: absolute; float: left; top: -10px; left: -20px; }
		</style>
		<script src="ext/jquery/jquery-1.6.2.min.js" type="text/javascript"></script>
		<script type="text/javascript">
			$(function(){
				$('.ui-state-default').hover(
					function(){$(this).addClass('ui-state-hover');},
					function(){$(this).removeClass('ui-state-hover');}
				)
				.mousedown(function(){$(this).addClass('ui-state-active');})
				.mouseup(function(){$(this).removeClass('ui-state-active');})
				.mouseout(function(){$(this).removeClass('ui-state-active');});
			});
		</script>
	</head>

	<body class="ui-widget-shadow">
	<div id="trdevtool_contain" class="ui-widget ui-widget-content ui-corner-all">
		<div class="ui-widget-header ui-corner-top">
			<img src="images/fflogo.png" class="firefox_logo" alt="firefox logo" width="100" height="95" />
			<h1>jQuery UI ThemeRoller <span>Developer Tool</span></h1>
		</div>

		<div class="ui-widget-content">

			<p>The ThemeRoller developer tool brings ThemeRoller into any page on the web! To install, simply drag the following link into your Firefox toolbar:</p>
			<p><a href="javascript:(function(){if (!/Firefox[\/\s](\d+\.\d+)/.test(navigator.userAgent)){alert('Sorry, due to security restrictions, this tool only works in Firefox'); return false; }; if(window.jquitr){ jquitr.addThemeRoller(); } else{ jquitr = {}; jquitr.s = document.createElement('script'); jquitr.s.src = 'http://www.kymation.com/developertool.js.php'; document.getElementsByTagName('head')[0].appendChild(jquitr.s);} })();" class="ui-state-default ui-corner-all">
				<span class="ui-icon ui-icon-newwin"></span>ThemeRoller Dev Tool</a></p>
				<p class="ortry"><em>...or just click it to give it a try!</em></p>
		</div>
	</div>

</body>
</html>
